<template>
  <el-card>
    <template #header>
      <div class="boxFlex">
        <span>会议纪要</span>
        <el-dropdown trigger="click" class="info">
          <el-icon class="pointer" title="操作">
            <MoreFilled/>
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="add">新增纪要</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </template>
    <div style="height: 400px;">
      <el-scrollbar v-if="state.list.length">
        <el-collapse v-model="state.activeName" @change="changeExpand">
          <el-collapse-item :title="item.title" :name="item.id" v-for="(item,index) in state.list" :key="index">
            <el-descriptions direction="vertical" :column="2" border>
              <el-descriptions-item label="标题" :span="2">{{ item.title }}</el-descriptions-item>
              <el-descriptions-item label="内容" :span="2">
                <markdown v-model="item.content" :previewOnly="true"></markdown>
              </el-descriptions-item>
              <el-descriptions-item label="附件" :span="2">
                <template v-if="item.fileList.length">
                  <el-alert v-for="(item1,index) in item.fileList" style="margin: 10px 0;" :key="index"
                            type="success" show-icon :closable="false">
                    <template v-slot:title>
                      <span class="pointer" :title="convertFileSize(item1)">{{ convertFileSize(item1) }}</span>
                      <el-icon class="pointer" title="下载附件" @click="downLoad(item1)">
                        <Download/>
                      </el-icon>
                    </template>
                  </el-alert>
                </template>
                <template v-else>
                  <span>暂无附件</span>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="创建人">{{ item.createdName }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ item.createdTime }}</el-descriptions-item>
              <el-descriptions-item label="更新人">{{ item.updatedName ?? '无' }}</el-descriptions-item>
              <el-descriptions-item label="更新时间">{{ item.updatedTime ?? '无' }}</el-descriptions-item>
              <el-descriptions-item label="操作">
                <el-button type="danger" size="small" @click="deleteMeetMinutes(item)">删除</el-button>
                <el-button type="primary" size="small">编辑</el-button>
              </el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
      <el-empty description="暂无会议纪要" v-else/>
    </div>
  </el-card>
  <project-meet-minutes-info :id="request.projectId" v-model="show.showProjectMeetMinutes"
                             v-if="show.showProjectMeetMinutes"
                             @save="saveProjectMeetMinutes"></project-meet-minutes-info>
</template>

<script>
import ProjectMeetMinutesInfo from '@/views/projectManage/components/projectMeetMinutesInfo'
import { onBeforeMount, reactive, toRefs, watch } from 'vue'
import { deleteMeetMinutesByIdUrl, downloadUrl, queryMeetMinutesListUrl } from '@/api/api'
import { commonPostDownloadFile, post } from '@/utils/httpRequest'
import { byteConvert } from '@/utils/util'

export default {
  name: 'projectMeetMinutes',
  components: { ProjectMeetMinutesInfo },
  setup (props) {
    const { id } = toRefs(props)
    const request = reactive({
      projectId: null
    })
    const state = reactive({
      list: [],
      activeName: []
    })
    const convertFileSize = (item) => {
      return `${item.fileOriginName}（${byteConvert(item.fileSize)}）`
    }
    const changeExpand = (names) => {
      console.log(names)
      state.activeName = names
    }
    const saveProjectMeetMinutes = () => {
      queryMeetMinutesListAsync()
    }
    const queryMeetMinutesListAsync = async () => {
      const result = await post(queryMeetMinutesListUrl, { id: request.projectId })
      if (result.code === 200) {
        console.log(result)
        state.list = result.data
      }
    }
    const add = () => {
      show.showProjectMeetMinutes = true
    }
    const setData = () => {
      request.projectId = id.value
      queryMeetMinutesListAsync()
    }
    const show = reactive({
      showProjectMeetMinutes: false
    })
    const downLoad = async (item) => {
      await commonPostDownloadFile(downloadUrl, { fileId: item.id })
    }
    const deleteMeetMinutes = async (item) => {
      const result = await post(deleteMeetMinutesByIdUrl, { id: item.id })
      if (result.code === 200) {
        await queryMeetMinutesListAsync()
      }
    }
    watch(() => id.value, () => {
      setData()
    })
    onBeforeMount(() => {
      setData()
    })
    return {
      deleteMeetMinutes,
      downLoad,
      convertFileSize,
      saveProjectMeetMinutes,
      changeExpand,
      state,
      request,
      add,
      show
    }
  },
  props: {
    id: {
      type: Number,
      default: 0,
      required: true
    }
  }
}
</script>

<style>
.popperClass {
  min-width: 110px !important;
}
</style>
